<template>
  <a-modal
    :width="isMobile() ? '100%' : '50%'"
    :class="isMobile() ? 'mobile-modal' : 'pc-modal'"
    cancel-text=" "
    ok-text="确定"
    v-model:visible="props.visible"
    :title="AGREEMENT_TYPE[props.agreementType]"
    @ok="handleOk"
    @cancel="handleOk"
  >
    {{ agreementContent }}
  </a-modal>
</template>

<script setup lang="ts">
import { AGREEMENT_TYPE } from '@/const'
import { getImgUrl, isMobile } from '@/utils'
import { onMounted, ref } from 'vue'
interface Props {
  visible: boolean
  agreementType: AGREEMENT_TYPE
}

const props = withDefaults(defineProps<Props>(), {
  agreementType: AGREEMENT_TYPE.用户协议
})

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
}>()

const handleOk = (e: MouseEvent) => {
  emit('update:visible', false)
}
const agreementContent = ref('')
onMounted(() => {
  // agreementContent.value =  readFile(getImgUrl(`static/${AGREEMENT_TYPE[props.agreementType]}.txt`))
  agreementContent.value = readFile(
    `https://jy-formulas-data.oss-cn-shenzhen.aliyuncs.com/chatservice/${
      AGREEMENT_TYPE[props.agreementType]
    }.txt`
  )
})

function readFile(filePath: string) {
  // 创建一个新的xhr对象
  let xhr = null,
    okStatus = document.location.protocol === 'file' ? 0 : 200
  xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
  xhr.open('GET', filePath, false)
  xhr.overrideMimeType('text/html;charset=utf-8')
  xhr.send(null)
  return xhr.status === okStatus ? xhr.responseText : null
}
</script>

<style lang="scss">
.mobile-modal {
  max-width: unset;
  height: 100%;
  top: 0;
  margin: 0 auto;
  .ant-modal-title {
    font-size: 18px;
    text-align: center;
    padding: 0px;
  }
  .ant-modal-close {
    top: 0px;
    right: 0px;
    .ant-modal-close-x {
      font-size: 16px;
    }
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    .ant-modal-body {
      height: calc(100% - 50px);
      overflow-y: auto;
      text-align: left;
      line-height: 20px;
      white-space: pre-wrap;
    }
  }
}
.pc-modal {
  .ant-modal-body {
    white-space: pre-wrap;
  }
}
</style>
